<template>
  <div class="studentHome">
    <el-container>
      <el-header class="header">
        <div class="info">
          <el-space wrap :size="50">
            <span
              ><img
                alt="学生成绩在线发布系统"
                src="..\..\assets\dhu.jpeg"
                height="60"
            /></span>
            <span
              ><i class="el-icon-user"></i> 学号：{{
                studentInfo.studentnumber
              }}</span
            >
            <span
              ><i class="el-icon-s-promotion"></i> 所属：{{
                studentInfo.department
              }}
              | {{ studentInfo.major }} | {{ studentInfo.classnumber }}</span
            >
            <span
              ><i class="el-icon-sunrise-1"></i> 姓名：{{
                studentInfo.studentname
              }}</span
            >
            <span>
              <div>
                <el-select
                  v-model="value"
                  placeholder="请选择"
                  @change="getScore"
                  style="width: 105px"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select></div
            ></span>
            <span
              ><el-button type="text" @click="exit" class="exit"
                >退出登陆</el-button
              ></span
            >
          </el-space>
        </div>
      </el-header>
      <el-main>
        <el-carousel
          class="carousel"
          height="85vh"
          :autoplay="false"
          loop="true"
        >
          <el-carousel-item>
            <el-row>
              <el-col :span="4"></el-col>
              <el-col :span="16">
                <el-card>
                  <el-table
                    :data="allscore"
                    :header-cell-style="getRowClass"
                    class="el-table"
                    max-height="600"
                  >
                    <el-table-column
                      prop="classname"
                      label="课程名"
                    ></el-table-column>
                    <el-table-column prop="score" label="分数">
                    </el-table-column>
                    <el-table-column prop="grade" label="评级">
                    </el-table-column>
                  </el-table>
                </el-card>
              </el-col>
              <el-col :span="4"></el-col>
            </el-row>
          </el-carousel-item>
          <el-carousel-item>
            <el-card>
              <el-row>
                <el-col :span="2"></el-col>
                <el-col :span="6">
                  <div id="levelpiechart" class="levelpiechart"></div>
                </el-col>
                <el-col :span="16" class="test">
                  <div id="bar" class="bar"></div>
                </el-col>
              </el-row>
            </el-card>
          </el-carousel-item>
        </el-carousel>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import axios from "axios";
import { path } from "../../config.json";
import * as echarts from "echarts";
import { color } from "echarts";
export default {
  name: "StudentHome",
  data() {
    return {
      studentInfo: {
        studentid: 0,
        studentnumber: 0,
        department: "",
        major: "",
        classnumber: "",
        studentname: "",
      },
      account: sessionStorage.getItem("account"),
      allscore: [],
      options: [
        {
          value: "2018下",
          label: "2018下",
        },
        {
          value: "2019上",
          label: "2019上",
        },
        {
          value: "2019下",
          label: "2019下",
        },
        {
          value: "2020上",
          label: "2020上",
        },
        {
          value: "2020下",
          label: "2020下",
        },
        {
          value: "2021上",
          label: "2021上",
        },
        {
          value: "2021下",
          label: "2021下",
        },
      ],
      value: "2018下",
      studentscore: [],
      className: [],
      scoreGrade: [],
    };
  },
  methods: {
    async getScore(xueqi) {
      this.studentscore.length = 0;
      this.className.length = 0;
      this.scoreGrade.length = 0;
      await axios({
        headers: {
          token: sessionStorage.getItem("token"), //此处放置请求到的用户token
        },
        method: "post",
        url: path + "/Sc/getAllScore",
        data: {
          studentnumber: this.account,
          xueqi: xueqi,
        },
      }).then((response) => {
        this.allscore = response.data;
        for (let i = 0; i < this.allscore.length; i++) {
          this.studentscore.push(this.allscore[i].score);
          this.className.push(this.allscore[i].classname);
          this.scoreGrade.push(this.allscore[i].grade);
        }
      });
      this.drawbar();
      this.drawpie();
    },
    rowStyle() {
      return "color:black";
    },
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "font-weight:bold;color:black";
      } else return "";
    },
    drawbar() {
      let colors = ["#5470C6", "#96D479", "#EA66A6", "#FAC858", "#EE6666"];
      let colorsList = [];
      // 判断颜色
      for (let i = 0; i < this.scoreGrade.length; i++) {
        colorsList.push(colors[this.scoreGrade[i].charCodeAt() - 65]);
      }
      var chartDom = document.getElementById("bar");
      var myChart = echarts.init(chartDom);
      //let myChartdouble = echarts.init(document.getElementById("bardouble"));
      var option;
      option = {
        title: {
          text: "学科成绩",
          left: "center",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: this.className,
            axisTick: {
              alignWithLabel: true,
            },
            nameTextStyle: {
              fontWeight: "bold",
              fontsize: 20,
            },
            axisLabel: {
              interval: 0,
              rotate: 45,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            max: 100,
          },
        ],
        series: [
          {
            name: "分数",
            type: "bar",
            barWidth: "50%",
            data: this.studentscore,
            itemStyle: {
              normal: {
                color: function (params) {
                  let colorList = colorsList;
                  return colorList[params.dataIndex];
                },
              },
            },
          },
        ],
      };
      option && myChart.setOption(option);
      //myChartdouble.setOption(option);
    },
    drawpie() {
      let pieChart = echarts.init(document.getElementById("levelpiechart"));
      //let pieChartdouble = echarts.init(document.getElementById("levelpiechartdouble"));
      //计算ABCDE等级的次数
      let temp = new Map();
      for (let i = 0; i < 5; i++) {
        let char = String.fromCharCode(65 + i);
        let count = 0;
        for (let j = 0; j < this.allscore.length; j++) {
          if (this.allscore[j].grade === char) {
            count++;
          }
        }
        console.log(char + count);
        temp.set(char, count);
      }
      let option = {
        title: {
          text: "等级分布",
          left: "center",
          subtext: "课程获得A、B、C、D、E的次数",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "等级",
            type: "pie",
            radius: "50%",
            data: [
              {
                value: temp.get("A"),
                name: "等级A",
                itemStyle: { color: "#5470C6" },
              },
              {
                value: temp.get("B"),
                name: "等级B",
                itemStyle: { color: "#96D479" },
              },
              {
                value: temp.get("C"),
                name: "等级C",
                itemStyle: { color: "#EA66A6" },
              },
              {
                value: temp.get("D"),
                name: "等级D",
                itemStyle: { color: "#FAC858" },
              },
              {
                value: temp.get("E"),
                name: "等级E",
                itemStyle: { color: "#EE6666" },
              },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0,0,0,0.5)",
              },
            },
          },
        ],
      };
      pieChart.setOption(option);
      //pieChartdouble.setOption(option);
    },
    exit() {
      sessionStorage.clear();
      this.$router.push({
        name: "Login",
      });
    },
  },
  async mounted() {
    this.studentInfo.studentnumber = sessionStorage.getItem("account");
    axios({
      headers: {
          token: sessionStorage.getItem("token"), //此处放置请求到的用户token
        },
      method: "post",
      url: path + "/student/getStudentInfo",
      params: {
        studentnumber: this.studentInfo.studentnumber,
      },
    })
      .then((response) => {
        if (Object.keys(response.data).length == 0) alert("null");
        this.studentInfo = response.data;
        console.log(1);
      })
      .catch(function (error) {
        ElMessage.error("与服务器通信失败，请重试！");
      });
    await axios({
      headers: {
          token: sessionStorage.getItem("token"), //此处放置请求到的用户token
        },
      method: "post",
      url: path + "/classTable/findAllClassTable",
      data: {},
    }).then((res) => {
      this.allClass = res.data;
    });
    this.getScore(this.value);
  },
};
</script>

<style scoped>
.studentInfo {
  float: left;
  text-align: left;
}
.h_info {
  text-align: left;
}
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  height: auto;
}
.info {
  /* background-color: #ffffff; */
  width: 100%;
}
.studentHome {
  /* background-image: url("../../assets/login.jpg");  #F2F6FC */
  background-color: #f2f6fc;
  background-size: cover;
  /*设置全局大小*/
  position: fixed;
  width: 100%;
  height: 100%;
}
.carousel {
  margin-top: 1%;
}
.levelpiechart {
  width: 50vh;
  height: 80vh;
}
.bar {
  width: 120vh;
  height: 80vh;
}
.exit {
  color: black;
}
.header {
  /* border-bottom: 1px dashed #000; */
  background-color: #ffffff;
  width: 100%;
}
</style>